<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>前后端交互</title>
    <script src="../js/jquery.js"></script>
    <script>
        $(function (){
            $.ajax({
                type:"get",
                url: "http://localhost:8080/findall/userList",
                /**
                 * data参数传递：
                 * 1.对象方式实现
                 * 语法：{key：value，key2：value2}
                 * 2.拼接字符串的方式
                 * 语法：“key1=value$key2=value2”
                 */
                success:function (data){
           /**      for(var i=0;i<data.length;i++){

                 }
            */
             /**       //js原生函数
                    for(index in data){
                        console.log(data[index])
                    }
              */
             for(demo_user of data){
                 let tr=`<tr align="center">
                      <td>${demo_user.id}</td>
                      <td>${demo_user.name}</td>
                      <td>${demo_user.age}</td>
                      <td>${demo_user.sex}</td>
                 <td>
                     <a class='btn btn-danger delete'   deteleid=${demo_user.id}> 删除 </a>
                     <a class='btn btn-success'  href='update.html?demo_user=${demo_user}'>修改</a>
                </td>
                       </tr>`
                 $("#tab1").append(tr)

             }
                },error: function (){

                }
            })
        });
        //根据id删除表数据
        $(document).on('click','.delete',function(){
            var id =this.getAttribute('deteleid');
            $.ajax({
                url: "http://localhost:8080/findall/delete",
                type: "get",
                data: {id:id},
                success: function (result) {
                    if (result == "success") {
                        alert("删除成功");
                        location.href = "/cgb2014-boot/boot-demo4/static/userList.html";
                    } else {
                        alert("删除失败，服务器正在维护")
                    }
                }
            });

        })


    </script>
</head>
<body>
   <table border="1px" width="70%" align="center" id="tab1"  style="background-color: aquamarine">
       <tr align="center" height="60px">
           <th colspan="5"><th1>用户列表</th1></tr></th>
       <tr align="center" height="60px" >
           <th>编号</th>
           <th>名称</th>
           <th>年龄</th>
           <th>性别</th>
           <th>操作</th>
       </tr>
   </table>
</body>
</html>